<template>
  <div class="item flex">
    <div class="left">
      <nuxt-link to="">
        <img :src="comment.user.avatar"/>
      </nuxt-link>
    </div>
    <div class="right">
      <div class="top">
        <div class="name">
          <UserInfo :user="comment.user" :showAvatar="false"></UserInfo>
          <template v-if="comment.reply">
            回复
            <UserInfo :show-avatar="false" :user="comment.reply"/>
            <span>：</span>
          </template>
        </div>
        <div class="time" v-text="comment.createTime">3年前</div>
      </div>
      <div class="content" v-html="comment.contentRendered">
        删除图片事件怎么写啊？还有，为什么在本地vue项目中点击上传图片要很久才弹出选择框啊
      </div>
      <div class="action flex">
        <div class="flex-item">
          <el-link icon="el-icon-thumb" class="praise" @click="up()">点赞({{ comment.up }})</el-link>
          <el-link icon="el-icon-chat-dot-round" @click.native="showReply=!showReply">
            <span v-if="!showReply">回复({{ comment.children.length }})</span>
            <span v-else>取消回复</span>
          </el-link>
        </div>
        <div v-if="isStaff||($store.state.user&&$store.state.user.id===comment.user.id)" class="flex-item text-right">
          <el-link type="danger" icon="el-icon-delete" @click="del(comment.id)">删除</el-link>
        </div>
      </div>
      <div v-if="showReply" class="reply">
        <el-input
          v-loading="loading"
          :disabled="loading"
          type="textarea"
          :rows="3"
          autofocus
          placeholder="请输入回复内容，支持Markdown语法"
          @keyup.esc.native="showReply=false"
          @paste.native="paste($event)"
          v-model="reply">
        </el-input>
        <div class="action">
          <el-button :disabled="loading" type="primary" size="mini" icon="el-icon-position" @click="replySave()">回复
          </el-button>
        </div>
      </div>
      <div class="subcomment" v-if="comment.children.length!==0">
        <CommentItem @refresh="$emit('refresh')" v-for="item in comment.children" :key="item.id" :comment="item"
                     :reply-user-id="item.user.id" :parent-id="comment.id"/>
      </div>
    </div>
  </div>
</template>

<script>
import api from "@/utils/api";

export default {
  name: "CommentItem",
  props: {
    comment: {
      type: Object,
      default: null
    },
    parentId: {
      type: String,
      default: null
    },
    replyUserId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      showReply: false,
      reply: '',
      loading: false
    }
  },
  computed: {
    isStaff() {
      let user = this.$store.state.user;
      return user && user.isStaff;
    }
  },
  methods: {
    up(){
      let self = this;
      api.commentUp(self.comment.id).then(res => {
        if (res.code === 1) {
          self.$emit('refresh');
        }
      });

    },
    paste(e) {
      let self = this;
      if (self.loading) {
        console.log('正在处理中')
        return;
      }
      if (e.clipboardData.files.length !== 0) {
        let file = e.clipboardData.files[0]
        self.loading = true;
        api.upload(file).then(data => {
          self.reply += `\n[${file.name}](${data.url})\n`;
        }).finally(() => self.loading = false);
      }
    },
    del(id) {
      let self = this;
      //删除评论
      this.$confirm('您确定要删除该评论吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        api.commentDelete(id).then(res => {
          if(res.code===1){
            self.$message.success("删除成功！");
            self.$emit('refresh');
          }
        });
      });
    },
    replySave() {
      //保存评论
      //父id和内容
      if (!this.reply.replace(/ /g, '')) {
        this.$message.error("请输入回复内容！");
        return;
      }
      let self = this;

      self.loading = true;

      let pid = this.parentId || this.comment.id;

      api.commentSave(null, null, this.reply, pid, this.replyUserId).then(res => {
        if (res.code === 1) {
          self.$message.success("回复成功！");
          self.showReply = false;
          //通知父组件刷新数据
          self.$emit('refresh');
        }
      }).finally(() => self.loading = false);
    }
  }
}
</script>

<style scoped lang="less">
.item {
  font-size: 12px;
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 10px;

  .left {
    flex: 0;

    img {
      width: 40px;
      height: 40px;
      border-radius: 20px;
      margin-right: 10px;
    }
  }

  .right {
    flex: 1;

    .top {
      display: flex;
      margin-bottom: 10px;

      .name {
        flex: 1;
        font-weight: 500;
        font-size: 15px;

      }

      .time {
        flex: 1;
        text-align: right;
      }
    }

    .content {
      line-height: 25px;
    }

    .action {
      a {
        font-size: 12px;
      }

      margin-top: 10px;
      margin-bottom: 10px;

      .praise {
        margin-right: 10px;
      }
    }
  }
}

.subcomment {
  background-color: var(--bg);
  padding: 10px;
  border-radius: 5px;
  margin: 10px 0;

  .item {
    border-bottom: var(--border-color) 1px solid;
    margin-bottom: 10px;

    &:last-child {
      border: none;
      margin-bottom: 0;
    }
  }

  .left {
    img {
      width: 20px;
      height: 20px
    }
  }
}

.reply {
  margin-bottom: 10px;

  .action {
    text-align: right;
    padding-top: 5px;
  }

}
</style>
